<template>
  <a-card class="min-h-[68px] rounded my-[10px]" :body-style="{ padding: '0px 10px', minHeight: '700px' }"
    :bordered="false">
    <!-- 头部返回列表功能 -->
    <template #extra>
      <a-button class="border-none" icon="rollback" @click="rollback">{{
        $t("app.setting.themecolor.rr99")
      }}</a-button>
    </template>
    <!-- 正文头部 -->
    <div slot="title">
      <a-space>
        <div class="ty"></div>
        {{ $t("user.verification-code.required1115661105718") }}
      </a-space>
    </div>
    <!-- 头部导航+查看RPA详情 -->
    <div style="margin: 30px 10px 0px 20px">
      <div style="display: flex; justify-content: space-between">
        <!-- 查看详情 -->
        <div style="
              margin-left: 20px;
              margin-top: -6px;
              right: 0;
              position: absolute;
              margin-right: 20px;
              z-index: 5;
            ">
          <rpaDetail :rpaDetailId="id" />
        </div>
      </div>
    </div>
    <div class="card-box">
      <div class="card-left">
        <p class="left-title">
          {{ $t("user.verification-code.required11156611036") }}
        </p>
        <ul style="padding-left: 15px">
          <li v-for="(item, i) in chapterLists" :key="item.title">
            <a-space align="center">
              <a-badge status="processing" style="margin-right: -40px; margin-bottom: 3px" v-if="item.check" />
              <a-button type="link" @click="changeChapter(item, i)">{{ item.title }}
              </a-button>
            </a-space>
          </li>
        </ul>
      </div>
      <!-- 主列表 -->
      <div class="card-right">
        <a-row>
          <a-space class="mb-[15px]">
            <div class="tags"></div>
            {{ $t("user.verification-code.required11156611037") }}
          </a-space>
          <a-table ref="table" size="middle" class="h-full overflow-x-auto mb-[80px]"
            :pagination="dpiaSimpleAnswerPagination" :dataSource="dpiaSimpleAnswerLists" :rowKey="(record) => record.Id"
             width="150px">
            <!-- <a-table-column key="DpiaChapterTopicType" data-index="DpiaChapterTopicType">
              <span slot="title" class="min-w-90p">{{ $t('user.verification-code.required11156611054') }}</span>
            </a-table-column> -->
            <a-table-column key="DpiaChapterTopic" data-index="DpiaChapterTopic" width="400px">
              <span slot="title" class="min-w-90p">{{
                $t("user.verification-code.required11156611055")
              }}</span>
            </a-table-column>
            <a-table-column key="DpiaChapterTopicAnswer" data-index="DpiaChapterTopicAnswer">
              <span slot="title" class="min-w-90p">{{
                $t("user.verification-code.required111566110056")
              }}</span>
              <span key="DpiaChapterTopicAnswer" slot-scope="text, record">
                <span v-html="text"></span>
                {{
                  record.DpiaChapterTopicType === 1 &&
                  record.DpiaChapterTopicRequired
                  ? `(${$t(
                    "user.verification-code.required111566110577666"
                  )}:${record.DpiaChapterTopicRequired})`
                  : ""
                }}
              </span>
            </a-table-column>

            <!-- <span slot="topicTypeAction" slot-scope="text, record">
                <div v-if="text == 1"> {{ $t('user.verification-code.required11156611038') }} </div>
                <div v-if="text == 2"> {{ $t( 'user.verification-code.required11156611039') }} </div>
                <div v-if="text == 3"> {{ $t('user.verification-code.required11156611040') }} </div>
              </span> -->
          </a-table>

          <!-- Action列表 -->
          <!-- <a-space class="mb-[15px]">
              <div class="tags"></div>{{ $t('user.verification-code.required11156611041') }}
            </a-space>
            <a-table ref="table" size="middle" class="h-full overflow-x-auto mb-[30px]" 
              :dataSource="dpiaSimpleActionLists" :rowKey="record => record.Id" >
              <a-table-column key="DpiaActionIdTag" data-index="DpiaActionIdTag" width="100px">
              <span slot="title" class="min-w-90p">{{ $t('user.verification-code.required11156611057') }}</span>
            </a-table-column>
            <a-table-column key="DpiaActionName" data-index="DpiaActionName"  width="100px">
              <span slot="title" class="min-w-90p">{{ $t( 'user.verification-code.required1115661105711') }}</span>
            </a-table-column>
            <a-table-column key="DpiaActionSource" data-index="DpiaActionSource" width="100px">
              <span slot="title" class="min-w-90p">{{ $t( 'user.verification-code.required1115661105712') }}</span>
            </a-table-column>
            <a-table-column key="DpiaActionUserResponsible" data-index="DpiaActionUserResponsible" width="90px">
              <span slot="title" class="min-w-90p">{{ $t(  'user.verification-code.required111566128') }}</span>
            </a-table-column>
            <a-table-column key="DpiaActionCreatetime" data-index="DpiaActionCreatetime" width="90px">
              <span slot="title" class="min-w-90p">{{ $t(  'user.verification-code.required111566169') }}</span>
            </a-table-column>
            <a-table-column key="DpiaActionResult" data-index="DpiaActionResult" width="90px">
              <span slot="title" class="min-w-90p">{{ $t(  'user.verification-code.required111566173') }}</span>
            </a-table-column>
            </a-table> -->
        </a-row>
      </div>
    </div>
    <!-- 下方按钮 -->
    <div class="btns" :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '20px 16px',
          background: '#fff',
          textAlign: 'center',
          zIndex: 1,
        }">
      <!-- 返回 -->
      <a-button type="primary" @click="saveup()" style="margin-right: 20px">
        {{ $t("app.setting.themecolor.rr") }}
      </a-button>
      <!-- 预览报告 -->
      <!-- <a-button type="primary" @click="viewbook()" style="margin-right: 20px;">{{
          $t('user.verification-code.required111566110577371442281431555') }}</a-button> -->
    </div>
  </a-card>
</template>
  
<script>
import {
  dpiaQuestionChapterLists,
  dpiaQuestionInfo,
  dpiaSimpleAnswer,
  dpiaQuestionChangeStatus,
  dpiaSimpleAction,
} from "@/api/dpia/form";
import RpaDetail from "./components/rpaDetail.vue";
import { userQuery } from "@/api/common/form";
import { quesionFindRpaId, rpaDetail } from "@/api/rpa/form";

export default {
  components: {
    RpaDetail,
  },
  mounted() {
  },
  data() {
    return {
      // 章节答题内容
      columns: [
        // {
        //   title: '题目类型',
        //   className: 'min-w-90p',
        //   dataIndex: 'DpiaChapterTopicType',
        //   scopedSlots: { customRender: 'topicTypeAction' },
        //   align: 'center',
        // },
        {
          title: "题目",
          width: "440px",
          dataIndex: "DpiaChapterTopic",
          align: "center",
        },

        {
          title: "回答内容",
          className: "min-w-30p",
          dataIndex: "DpiaChapterTopicAnswer",
          align: "center",
          scopedSlots: { customRender: "dpiaChapterTopicAnswer" },
        },
      ],
      // Action内容
      actionColumns: [
        {
          title: "Action编号",
          className: "min-w-90p",
          dataIndex: "DpiaActionIdTag",
          align: "center",
        },
        {
          title: "合规要求名称",
          className: "min-w-90p",
          dataIndex: "DpiaActionName",
          align: "center",
        },
        {
          title: "Action来源",
          className: "min-w-90p",
          dataIndex: "DpiaActionSource",
          align: "center",
        },
        {
          title: "责任人",
          className: "min-w-90p",
          dataIndex: "DpiaActionUserResponsible",
          align: "center",
        },
        {
          title: "发起时间",
          className: "min-w-90p",
          dataIndex: "DpiaActionCreatetime",
          align: "center",
        },
        {
          title: "合规要求描述",
          className: "min-w-90p",
          dataIndex: "DpiaActionResult",
          align: "center",
        },
      ],
      dco: undefined,
      // DCO列表
      userList: [],
      // DCO按钮
      dcoButtom: false,

      // 上一页按钮控制
      previousPageButtom: true,

      // 下一页按钮控制
      nextPageButtom: true,

      value: "",
      visible: false,

      // 配置分页
      dpiaSimpleAnswerPagination: {
        page: 1,
        pageSize: 10,
        total: 0,
        current: 1,
      },
      dpiaSimpleActionPagination: {
        page: 1,
        pageSize: 1,
        total: 0,
      },

      // 左侧的章节列表
      chapterLists: [],

      // 基础答题信息
      questionnaireInfo: {},

      // 问题和答案数据
      dpiaQuestionTopicAnswer: {},

      // 问卷ID
      id: "",

      // 获取用户问题答案
      dpiaQuestionUserAnswer: {},

      // 当前题型
      topicType: 0,

      // 是否结束
      finishStatus: 0,

      // 已答题的结果
      dpiaQuestionUserLastAnswer: "",

      // 答题章节内容
      dpiaSimpleAnswerLists: [],

      // Action列表
      dpiaSimpleActionLists: [],

      //chapter Id
      chapterId: 0,

      //上一章/下一章
      num: 0,
      lang: localStorage.getItem("lang").includes("zh-CN"),
    };
  },
  created() {
    this.init();
  },
  mounted() {
    let that = this;
    window.addEventListener("setItemEvent", function (e) {
      if (e.key == "lang") {
        let lang = JSON.parse(e.value);
        if (lang == "zh-EN") {
          that.lang = false;
        } else {
          that.lang = true;
        }
        that.changeChapter({ id: that.chapterId }, that.num);
      }
    });
  },
  methods: {
    async changeChapter(items, i) {
      if (i) {
        this.num = i;
      }
      // 如果是新的章节，默认给它重置一下
      // 保障是首次分页
      // 因为Current默认有效，所以，在重置时记得把current重置为1
      if (items.id != this.chapterId) {
        this.dpiaSimpleAnswerPagination = {
          page: 1,
          pageSize: 10,
          total: 0,
          current: 1,
        }
      }
      this.chapterId = items.id;

      try {
        // 默认获取第一章节
        const { data: dpiaSimpleAnswerObject } = await dpiaSimpleAnswer({
          id: this.id,
          DpiaChapterId: items.id,
          lang: this.lang ? 0 : 1,
        });
        const { Page, PageSize, Total, Lists } = dpiaSimpleAnswerObject;

        this.dpiaSimpleAnswerLists = Lists;
        this.dpiaSimpleAnswerPagination = {
          page: Page,
          pageSize: PageSize,
          total: Total,
        };

        const { page, pageSize } = this.dpiaSimpleActionPagination;
        // 默认获取第一章节
        const { data: dpiaSimpleActionObject } = await dpiaSimpleAction({
          Id: this.id,
          ChapterId: this.chapterId,
          page,
          pageSize,
        });
        const {
          Page: page1,
          PageSize: pageSize1,
          Total: total1,
          Lists: Lists1,
        } = dpiaSimpleActionObject;

        this.dpiaSimpleActionLists = Lists1;
        this.dpiaSimpleActionPagination = {
          page: page1,
          pageSize: pageSize1,
          total: total1,
        };
      } catch (error) {
        console.log("error:", error);
        this.$message.error(error);
      }
    },

    async init() {
      this.chapterId = 0;
      try {
        // 初始化题库
        var id = this.$route.query.id;

        this.id = id;
        const { data } = await quesionFindRpaId({ Id: id });
        // 获取RPA详情
        const { data: rpaDetailInfo } = await rpaDetail({ Id: data.DpiaRpaId });
        console.log(rpaDetailInfo)
        this.dpiaSimpleAnswerLists = [{
          DpiaChapterTopic: "The activity has finished PIA, please refer to PIA Link:",
          DpiaChapterTopicAnswer: rpaDetailInfo.RpaPIALinkUrl,
          DpiaChapterTopicId: 165,
          DpiaChapterTopicType: 2,
          Id: 836,
        }]
        //   // 章节列表
        //   const { data: chapterLists } = await dpiaQuestionChapterLists({
        //     id: id,
        //   });

      } catch (error) {
        console.log("error:", error);
        this.$message.error(error);
      }
    },
    async showModal() {
      this.visible = true;
      // 获取用户列表下拉
      const { data: userList } = await userQuery(1);

      this.userList = userList;
    },
    async handleOk(e) {
      // 交卷
      if (this.dco == undefined) {
        this.$message.error(
          this.$t("user.verification-code.required111566110577268")
        );
        return;
      }
      try {
        console.log("1111");
        await dpiaQuestionChangeStatus({
          Id: this.id,
          DpiaStatus: 2,
          DpiaDcoUserId: this.dco,
        });
        this.$message.success(
          this.$t("user.verification-code.required111566110577270")
        );
      } catch (error) {
        this.$message.error(error);
      }

      this.topicShow();
      this.visible = false;
      // 开启那个结果页
      this.finishStatus = 1;
    },

    rollback() {
      this.$router.push("/dpia/service");
    },

    //返回
    async saveup() {
      this.$router.push({ path: "/dpia/service" });
    },
    //预览报告
    async viewbook() {
      //调接口
      // try {
      //   await rickActiondel({ Id: id })
      //   this.$message.success(this.$t('user.verification - code.required111566110577308'))
      //   this.$router.push({ path: '/dpia' })
      // } catch (error) {
      //   this.$message.error(error)
      // } finally {
      // }
    },
   
  },
};
</script>
  
<style lang="less" scoped>
/deep/.ant-card-body {
  // display: flex;

  .buttomm {
    width: 100%;
  }

  .card-box {
    font-size: 15.5px;
    display: flex;
  }

  .card-left {
    /*rectangle copy 4备份 87*/
    margin: 20px 30px 20px 20px;
    color: #444e84;
    left: 339px;
    top: 287px;
    width: 388px;
    min-height: 415px;
    opacity: 0.67;
    border-radius: 2px;
    background: #f7faff;

    ul {
      margin-top: 10px;
    }

    ul li {
      padding: 3px;
    }
  }

  .left-title {
    color: #050c34;
    width: 100%;
    line-height: 40px;
    padding: 0 10px;
    padding-left: 20px;
    background: #e7f0ff;
    border-bottom: 1px solid #ddd;
  }

  .card-right {
    width: 100%;
  }

  p {
    color: #000;
  }
}


.tags {
  left: 298px;
  top: 288px;
  width: 6px;
  height: 14px;
  opacity: 1;
  border-radius: 2px;
  background: rgba(0, 80, 247, 1);
}
</style>